<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="header">
			<view class="title">
				<view class="item" @click="switchLoginType('account')"><text
						:class="loginType === 'account' ? 'active' : ''">{{ accountTitle }}</text></view>
				<view class="item" @click="switchLoginType('sms')"><text
						:class="loginType === 'sms' ? 'active' : ''">短信登录</text></view>
			</view>
		</view>

		<!-- 账号登录表单 start-->
		<view class="login-form" v-if="loginType === 'account'">
			<!-- 手机号 -->
			<view class="form-item">
				<text class="iconfont icon-sy-yh"></text>
				<input class="form-item--input uni-input" type="text" v-model="account" maxlength="30" clearable="true"
					placeholder="请输入您的用户名" />
			</view>
			<!-- 密码 -->
			<view class="form-item">
				<text class="iconfont icon-suo"></text>
				<input class="form-item--input" type="password" autocomplete="off" v-model="password" maxlength="30"
					minlength="1" value="" placeholder="请输入您的密码" />
			</view>
			<!-- 确认密码 -->
			<view class="form-item" v-if="isRegister">
				<text class="iconfont icon-suo"></text>
				<input class="form-item--input" type="password" autocomplete="off" v-model="password1" maxlength="30"
					value="" placeholder="请再次输入密码" />
			</view>
			<!-- 图形验证码 -->
			<view class="form-item">
				<text class="iconfont icon-tuxingyanzhengma"></text>
				<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5"
					placeholder="请输入图形验证码" />
				<view class="form-item--parts">
					<view class="captcha" @click="getCaptcha()">
						<image class="image" :src="captcha"></image>
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="login-button" v-if="!isRegister" @click="handleSubmit"><text>立即登录</text></view>
			<view class="login-button" v-if="isRegister" @click="handleSubmit"><text>立即注册</text></view>
			<view class="cancel-button" @click="handleCancel"><text>取消</text></view>
			<view class="register" v-if="!isRegister" @click="toRegister()">还没有账号？去注册</view>
			<view class="register" v-if="isRegister" @click="toRegister()">已有账号？立即登录</view>
		</view>
		<!-- 账号登录表单 end-->

		<!-- 短信登录表单 start-->
		<view class="login-form" v-if="loginType === 'sms'">
			<!-- 手机号 -->
			<view class="form-item">
				<text class="iconfont icon-shoujihao"></text>
				<text class="pre-mobile">+86</text>
				<input class="form-item--input" style="padding-left: 12rpx;" type="number" v-model="mobile"
					maxlength="11" placeholder="请输入手机号码" />
			</view>
			<!-- 图形验证码 -->
			<view class="form-item">
				<text class="iconfont icon-tuxingyanzhengma"></text>
				<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5"
					placeholder="请输入图形验证码" />
				<view class="form-item--parts">
					<view class="captcha" @click="getCaptcha()">
						<image class="image" :src="captcha"></image>
					</view>
				</view>
			</view>
			<!-- 短信验证码 -->
			<view class="form-item">
				<text class="iconfont icon-yanzhengma"></text>
				<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
				<view class="form-item--parts">
					<view class="captcha-sms" @click="handelSmsCaptcha()">
						<text v-if="!smsState" class="activate">获取验证码</text>
						<text v-else class="un-activate">重新发送({{ times }})秒</text>
					</view>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="login-button" @click="handleSubmit"><text>验证码登录</text></view>
		</view>
		<!-- 短信登录表单 end-->
	</view>
</template>

<script>
	import store from '@/store'
	import * as LoginApi from '@/api/login'
	import {
		throttle,
		debounce
	} from '@/utils/util'
	import * as Verify from '@/utils/verify'
	import {
		checkLogin,
		isWechat
	} from '@/utils/app'

	// 倒计时时长(秒)
	const times = 60

	// 表单验证场景
	const GET_CAPTCHA = 10
	const SUBMIT_LOGIN = 20
	const SUBMIT_LOGIN_ACCOUNT = 30
	const SUBMIT_REGISTER = 40

	export default {
		props: {
			// 是否存在第三方用户信息
			isParty: {
				type: Boolean,
				default: () => false
			},
			// 第三方用户信息数据
			partyData: {
				type: Object
			}
		},

		data() {
			return {
				// 账号标题
				accountTitle: '账号登录',
				// 是否注册新账号
				isRegister: false,
				// 登录方式
				loginType: 'account',
				// 正在加载
				isLoading: false,
				// 图形验证码信息
				captcha: "",
				// 图形验证码uuid
				captchaUuid: "",
				// 账号图形验证码信息
				captchaForAccount: "",
				// 短信验证码发送状态
				smsState: false,
				// 倒计时
				times,
				// 手机号
				mobile: '',
				// 账号
				account: '',
				// 密码
				password: '',
				// 确认密码
				password1: '',
				// 图形验证码
				captchaCode: '',
				// 短信验证码
				smsCode: ''
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {
			// 获取图形验证码
			this.getCaptcha();
		},

		methods: {
			// 切换登录方式
			switchLoginType(loginType) {
				this.loginType = loginType;
				this.mobile = "";
				this.account = "";
				this.password = "";
				this.password1 = "";
				this.smsCode = "";
				this.getCaptcha();
				if (loginType === 'sms') {
					this.isRegister = false;
					this.accountTitle = '账号登录';
				}
			},
			// 注册新用户
			toRegister() {
				if (!this.isRegister) {
					this.accountTitle = '注册新账号';
					this.isRegister = true;
				} else {
					this.accountTitle = '账号登录';
					this.isRegister = false;
				}
			},
			// 获取图形验证码
			getCaptcha() {
				const app = this
				LoginApi.captcha()
					.then(result => {
						app.captcha = "data:image/svg+xml;base64," + result.img;
						app.captchaUuid = result.uuid;
						app.captchaCode = "";
					})
			},

			// 点击发送短信验证码
			handelSmsCaptcha() {
				const app = this
				if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
					app.sendSmsCaptcha();
				}
			},

			// 表单验证
			formValidation(scene) {
				const app = this
				// 验证获取短信验证码
				if (scene === GET_CAPTCHA) {
					if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
						return false
					}
				}
				// 验证提交登录
				if (scene === SUBMIT_LOGIN) {
					if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
						return false
					}
				}
				// 验证账号登录
				if (scene === SUBMIT_LOGIN_ACCOUNT) {
					if (!app.validteAccount(app.account) || !app.validtePassword(app.password) || !app.validteCaptchaCode(
							app.captchaCode)) {
						return false
					}
				}
				// 验证提交注册
				if (scene === SUBMIT_REGISTER) {
					if (!app.validteAccount(app.account) || !app.validtePassword(app.password) || !app.validtePassword1(app
							.password1) || !app.validteCaptchaCode(app.captchaCode)) {
						return false
					}
					if (app.password !== app.password1) {
						this.$toast('两次输入的密码不一致');
						return false;
					}
				}
				return true;
			},

			// 验证手机号
			validteMobile(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入手机号')
					return false
				}
				if (!Verify.isMobile(str)) {
					this.$toast('请输入正确格式的手机号')
					return false
				}
				return true
			},

			// 验证账号
			validteAccount(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入您的用户名')
					return false
				}
				if (str.length < 5) {
					this.$toast('用户名不能少于5位')
					return false
				}
				return true
			},
			// 验证密码
			validtePassword(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入您的密码')
					return false
				}
				if (str.length < 6) {
					this.$toast('密码不能少于6位')
					return false
				}
				return true
			},
			// 验证密码
			validtePassword1(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请再次输入您的密码')
					return false
				}
				return true
			},

			// 验证图形验证码
			validteCaptchaCode(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入图形验证码')
					return false
				}
				return true
			},

			// 验证短信验证码
			validteSmsCode(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入短信验证码')
					return false
				}
				return true
			},

			// 请求发送短信验证码接口
			sendSmsCaptcha() {
				const app = this
				app.isLoading = true
				LoginApi.sendSmsCaptcha({
						captchaKey: app.captcha.key,
						captchaCode: app.captchaCode,
						mobile: app.mobile,
						uuid: app.captchaUuid
					})
					.then(result => {
						// 显示发送成功
						if (result.data) {
							app.$toast(result.message)
							// 执行定时器
							app.timer()
						} else {
							app.$error(result.message)
						}
					})
					.finally(() => app.isLoading = false)
			},

			// 执行定时器
			timer() {
				const app = this
				app.smsState = true
				const inter = setInterval(() => {
					app.times = app.times - 1
					if (app.times <= 0) {
						app.smsState = false;
						app.times = times;
						clearInterval(inter);
					}
				}, 1000)
			},

			// 点击提交
			handleSubmit() {
				const app = this
				// 短信验证码登录
				if (!app.isLoading && !app.isRegister && app.loginType === 'sms') {
					if (app.formValidation(SUBMIT_LOGIN)) {
						app.submitLogin();
					}
				}

				// 账号登录
				if (!app.isLoading && !app.isRegister && app.loginType === 'account') {
					if (app.formValidation(SUBMIT_LOGIN_ACCOUNT)) {
						app.submitLogin();
					}
				}

				// 注册新账号
				if (!app.isLoading && app.isRegister) {
					if (app.formValidation(SUBMIT_REGISTER)) {
						app.submitRegister();
					}
				}

				return true
			},
			// 取消返回
			handleCancel() {
				this.$navTo('pages/user/index');
			},
			// 确认注册
			submitRegister() {
				const app = this
				app.isLoading = true
				store.dispatch('Register', {
						account: app.account,
						password: app.password,
						password1: app.password1,
						captchaKey: app.captcha.key,
						captchaCode: app.captchaCode,
						uuid: app.captchaUuid,
						shareId: (uni.getStorageSync('shareId') ? uni.getStorageSync('shareId') : 0)
					})
					.then(result => {
						// 显示登录信息
						app.$toast(result.message)
						if (result.code === 200) {
							// 注册成功，去认证
							app.isNeedAuth(result.data);
						} else {
							app.$error(result.message);
							app.getCaptcha();
						}
					})
					.finally(() => app.isLoading = false)
			},

			// 确认登录
			submitLogin() {
				const app = this
				app.isLoading = true
				store.dispatch('Login', {
						verifyCode: app.smsCode,
						mobile: app.mobile,
						account: app.account,
						password: app.password,
						isParty: app.isParty,
						partyData: app.partyData,
						captchaCode: app.captchaCode,
						uuid: app.captchaUuid,
						shareId: (uni.getStorageSync('shareId') ? uni.getStorageSync('shareId') : 0)
					})
					.then(result => {
						// 显示登录信息
						app.$toast(result.message)
						if (result.code === 200) {
							// 登录成功，去认证
							app.isNeedAuth(result.data);
						} else {
							app.$error(result.message);
							app.getCaptcha();
						}
					})
					.finally(() => app.isLoading = false)
			},

			/**
			 * 去授权认证
			 * */
			isNeedAuth(loginInfo) {
				this.onNavigateBack(1);
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta) {
				uni.navigateBack({
					delta: Number(delta || 1)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 160rpx 60rpx 100rpx 60rpx;
		min-height: 100vh;
		background-color: #fff;

		.fast-icon {
			margin-bottom: 80rpx;
			font-size: 50rpx;
			cursor: pointer;
		}
	}

	// 页面头部
	.header {
		margin-bottom: 50rpx;

		.title {
			color: #191919;
			font-size: 33rpx;
			height: 88rpx;
			padding: 10rpx;
			cursor: pointer;

			.item {
				width: 50%;
				height: 88rpx;
				float: left;
				text-align: center;
				font-weight: bold;
			}

			.active {
				border-bottom: #ff3800 10rpx solid;
				padding-bottom: 10rpx;
				text-align: center;
			}
		}
	}

	// 输入框元素
	.form-item {
		display: flex;
		padding: 18rpx;
		border-bottom: 2rpx solid #cccccc;
		margin-bottom: 25rpx;
		height: 110rpx;
		align-items: center;
		justify-content: center;

		.pre-mobile {
			line-height: 75rpx;
			color: #888888;
		}

		&--input {
			font-size: 26rpx;
			letter-spacing: 1rpx;
			flex: 1;
			height: 100%;
			padding-left: 5rpx;
		}

		&--parts {
			min-width: 100rpx;
			height: 100%;
		}

		// 图形验证码
		.captcha {
			height: 100%;

			.image {
				display: block;
				width: 192rpx;
				height: 80rpx;
			}
		}

		// 短信验证码
		.captcha-sms {
			font-size: 22rpx;
			line-height: 50rpx;
			padding-right: 20rpx;

			.activate {
				color: #cea26a;
				border: #ccc solid 1px;
				padding: 18rpx;
				border-radius: 8rpx;
			}

			.un-activate {
				color: #9e9e9e;
			}
		}
	}


	// 登录按钮
	.login-button {
		width: 96%;
		height: 86rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		background: $fuint-theme;
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		border-radius: 80rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
		cursor: pointer;
	}

	// 取消按钮
	.cancel-button {
		width: 96%;
		height: 86rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background: #dfdfdf;
		color: #fff;
		text-align: center;
		line-height: 86rpx;
		border-radius: 80rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
		cursor: pointer;
	}

	// 去注册
	.register {
		margin-top: 40rpx;
		text-align: right;
	}

	// 微信授权登录
	.wechat-auth {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;

		.icon {
			width: 38rpx;
			height: 38rpx;
			margin-right: 15rpx;
		}

		.title {
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>